<template>
  <div>
    <el-row :gutter="20">
      <el-col :xs="12" :sm="8" :md="8" :lg="5"
        ><el-input placeholder="请输入名称" v-model="listQuery.name" clearable>
        </el-input
      ></el-col>
      <el-col :xs="12" :sm="4" style="padding: 0"
        ><el-button type="custom" plain @click="getList()">搜索</el-button>
        <el-button
          type="custom"
          @click="showEditDialog('add')"
          v-if="$button('91')"
        >
          新增</el-button
        >
      </el-col>
    </el-row>

    <el-menu
      class="el-menu-demo"
      mode="horizontal"
      :default-active="listQuery.type"
      background-color="#ffffff"
      @select="handleClick"
    >
      <el-menu-item v-for="(v, i) in typeData" :key="i" :index="v.value">
        {{ v.label }}
      </el-menu-item>
    </el-menu>
    <el-table
      :data="dictionaryTableData"
      style="width: 100%"
      stripe
      v-loading="loading"
    >
      <el-table-column fixed prop="sort" label="排序"> </el-table-column>
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="createName" label="创建人">
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间">
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="{ row }">
          <el-button-group>
            <el-button
              type="primary"
              size="mini"
              @click="showEditDialog('edit', row)"
              :disabled="$button('92') == false ? true : false"
              class="jurisdiction"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="mini"
              :disabled="$button('93') == false ? true : false"
              @click="showDeleDialog(row)"
              class="jurisdiction"
              >删除</el-button
            >
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>

    <Pagination
      style="margin-top: 20px"
      v-show="parseInt(pageObj.count) > 0"
      :total="parseInt(pageObj.count)"
      @change="getList"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
    />

    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogFormVisible"
      width="700px"
      class="dialog-wrap"
      @close="$reset('temp')"
      :close-on-click-modal="false"
    >
      <el-form ref="temp" :model="temp" :rules="rules" label-width="80px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="temp.name"></el-input>
        </el-form-item>
        <el-form-item label="分类类型" prop="type">
          <el-select
            style="width: 100%"
            v-model="temp.type"
            placeholder="请选择分类类型"
          >
            <el-option
              v-for="(v, i) in typeData"
              :key="i"
              :label="v.label"
              :value="v.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number
            v-model="temp.sort"
            :min="1"
            :max="1000"
            size="medium"
            label="排序"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          v-show="!addOrEdit"
          type="custom"
          v-preventReClick
          @click="handleAdd('temp')"
          >提 交</el-button
        >
        <el-button
          v-show="addOrEdit"
          type="custom"
          v-preventReClick
          @click="handleUpdate('temp')"
          >提 交</el-button
        >
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  tbLabelQuery,
  tbLabelAdd,
  tbLabelUpdate,
  tbLabelDelete,
} from "@/api/admin/system/label";
import { tbDictDefinitionQueryEnumList } from "@/api/admin/system/dictionary";
export default {
  created() {
    this.queryType();
    this.getList();
  },
  data() {
    return {
      courseType: "",
      listQuery: {
        page: 1,
        limit: 10,
        name: "",
        type: "1",
        labelType: 1,
      },
      dialogTitle: "",
      typeData: [],
      dictionaryTableData: [],
      pageObj: {},
      dataValue: "",
      loading: false,
      addOrEdit: true,
      dialogFormVisible: false,
      temp: {
        labelType: 1,
        type: "1",
        sort: 10,
      },
      rules: {
        name: [
          { required: true, message: "请输入名称", trigger: "blur" },
          {
            trigger: "blur",
          },
        ],
        type: [
          { required: true, message: "请输入分类类型", trigger: "blur" },
          {
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {
    $route: {
      immediate: true,
      handler() {
        let { labelType } = this.$route.meta;
        this.listQuery.labelType = labelType;
        this.temp.labelType = labelType;
        this.getList();
      },
    },
  },
  methods: {
    //切换页签
    handleClick(tab) {
      this.listQuery.type = tab;
      this.courseType = tab;
      this.getList();
    },
    //获取列表
    getList() {
      tbLabelQuery(this.listQuery).then((res) => {
        this.dictionaryTableData = res.data.data;
        this.pageObj = res.data;
      });
    },
    //查询分类类型
    queryType() {
      tbDictDefinitionQueryEnumList({ code: "RESOURCE_CLASSIFICATION" }).then(
        (res) => {
          let arr = [];
          for (let obj of res.data.data) {
            let list = {};
            list["label"] = obj.msg;
            list["value"] = obj.value;
            arr.push(list);
          }
          this.typeData = arr;
          this.courseType = this.typeData[0].value;
        }
      );
    },
    // 显示编辑弹出框
    showEditDialog(type, row) {
      if (type == "edit") {
        this.addOrEdit = true;
        this.dialogTitle = "编辑";
      } else {
        this.addOrEdit = false;
        this.dialogTitle = "新增";
      }
      if (row) {
        this.temp = { ...row };
      }
      this.temp.type = this.courseType;
      this.dialogFormVisible = true;
    },
    addDic() {},
    //编辑
    handleUpdate(temp) {
      this.$refs[temp].validate((valid) => {
        if (valid) {
          tbLabelUpdate(this.temp).then((res) => {
            if (res.data.code == 0) {
              this.$message.success("保存成功");
              this.dialogFormVisible = false;

              this.getList();
            } else {
              this.$message.error(res.data.msg);
            }
          });
        }
      });
    },
    //新增
    handleAdd(temp) {
      this.$refs[temp].validate((valid) => {
        if (valid) {
          tbLabelAdd(this.temp).then((res) => {
            if (res.data.code == 0) {
              this.$message.success("保存成功");
              this.dialogFormVisible = false;
              this.getList();
            } else {
              this.$message.error(res.data.msg);
            }
          });
        }
      });
    },
    // 删除
    showDeleDialog(row) {
      this.temp = { ...row };
      this.$confirm("确认删除？删除之后不再恢复", "提示", {
        type: "warning",
      })
        .then((_) => {
          tbLabelDelete(this.temp.id).then((res) => {
            if (res.data.code == 0) {
              this.$message.success("删除成功");

              this.getList();
            } else {
              this.$message.error(res.data.msg);
            }
          });
        })
        .catch((_) => {});
    },
  },
};
</script>
<style >
.dialog-wrap .el-form-item__label:before {
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}
</style>